import React, {useState, useContext} from 'react';
import {useMount} from 'ahooks';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {useSelector, useDispatch} from 'react-redux';
import {setRouteDate} from '@/store';
import GlobalContext from '@/GlobalContext';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const NativeStack = createNativeStackNavigator();

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const TabStack = createBottomTabNavigator();

import Icon from '@/Icon';
import Home from './Home';
import Book from './Book';
import Found from './Found';
import Mine from './Mine';
import Netdisk from './Netdisk';

export default () => {
  const {eventEmitterGlobal} = useContext(GlobalContext);

  const dispatch = useDispatch();
  const routeData = useSelector(state => state.routeData.value);
  const accountInfo = useSelector(state => state.accountInfo.value);
  const isSignedIn = !!accountInfo?.account_id;

  const navigationRef = useNavigationContainerRef();
  const onRouteChange = () => {
    const route = navigationRef.getCurrentRoute();
    const state = navigationRef.getState();
    dispatch(setRouteDate(route));
    // try {
    //   const v = route.name;
    //   if (routerMap.has(v)) {
    //     AsyncStorage.setItem('pageRouteName', v);
    //   }
    // } catch (e) {
    //   console.log('保存页面路径异常', e.message);
    // }
  };
  useMount(async () => {
    // const v = await AsyncStorage.getItem('pageRouteName');
    // if (!routerMap.has(v)) {
    //   return;
    // }
    // setTimeout(() => {
    //   if (navigationRef.isReady()) {
    //     console.log('跳转上一次路由', v);
    //     navigationRef?.navigate(v);
    //   }
    // });
  });
  // return <Text>OK</Text>
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        onRouteChange();
      }}
      onStateChange={state => {
        onRouteChange();
      }}>
      <TabStack.Navigator screenOptions={{headerShown: false}}>
        <TabStack.Screen
          name="Home"
          component={Home}
          options={{
            title: '首页',
            tabBarIcon: ({color}) => (
              <Icon name={'Home'} color={color} width={24} height={24} />
            ),
            headerShown: false,
          }}
        />
        <TabStack.Screen
          name="Netdisk"
          component={Netdisk}
          options={{
            title: '网盘',
            tabBarIcon: ({color}) => (
              <Icon name={'Netdisk'} color={color} width={24} height={24} />
            ),
          }}
        />
        <TabStack.Screen
          name="Found"
          component={Found}
          options={{
            title: '发现',
            tabBarIcon: ({color}) => (
              <Icon name={'Found'} color={color} width={24} height={24} />
            ),
          }}
        />
        <TabStack.Screen
          name="Book"
          component={Book}
          options={{
            title: '通讯录',
            tabBarIcon: ({color}) => (
              <Icon name={'Book'} color={color} width={24} height={24} />
            ),
          }}
        />
        <TabStack.Screen
          name="Mine"
          component={Mine}
          options={{
            title: '我的',
            tabBarIcon: ({color}) => (
              <Icon name={'Mine'} color={color} width={24} height={24} />
            ),
          }}
        />
      </TabStack.Navigator>
    </NavigationContainer>
  );
};
